<template>
  <div class="my-page page-container">
    <!-- 顶部导航 -->
    <van-nav-bar title="我的" left-arrow @click-left="router.back()" />

    <!-- 用户信息区 -->
    <div class="content-container">
      <!-- 加载状态 -->
      <van-overlay :show="loading" class="loading-overlay">
        <van-loading type="spinner" color="$primary-color" />
      </van-overlay>
      <div class="user-profile" @click="goToProfile">
        <div class="user-avatar">
          <!-- 使用可选链操作符 ?. 或提供默认值 -->
          <img :src="userInfo?.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'" alt="" />
        </div>
        <div class="user-info">
          <div class="user-name">{{ userInfo?.username || '未登录' }}</div>
          <div class="user-nickname" v-if="userInfo?.nickname && userInfo?.nickname !== userInfo?.username">
            昵称: {{ userInfo?.nickname }}
          </div>
          <div class="user-id">
            用户ID: {{ userInfo?.id || '000000' }}
            <!-- 性别图标 - 使用 Unicode 字符，与截图一致 -->
            <span class="gender-icon" v-if="userInfo && userInfo.gender !== undefined">
              <span v-if="Number(userInfo.gender) === 1" style="color: #2196f3; font-size: 16px;">♂</span>
              <span v-if="Number(userInfo.gender) === 2" style="color: #ff4081; font-size: 16px;">♀</span>
            </span>
          </div>
        </div>
        <div class="edit-profile-btn">
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 数据统计 -->
      <div class="user-stats">
        <div class="stat-item" @click="goToFavorites">
          <div class="stat-num">{{ stats.favorites || 0 }}</div>
          <div class="stat-text">收藏</div>
        </div>
        <div class="stat-item" @click="goToFollowing">
          <div class="stat-num">{{ stats.following || 0 }}</div>
          <div class="stat-text">关注</div>
        </div>
        <div class="stat-item" @click="goToFollowers">
          <div class="stat-num">{{ stats.followers || 0 }}</div>
          <div class="stat-text">粉丝</div>
        </div>
        <div class="stat-item" @click="goToLikes">
          <div class="stat-num">{{ stats.likes || 0 }}</div>
          <div class="stat-text">获赞</div>
        </div>
      </div>

      <!-- 功能入口 -->
      <div class="feature-grid">
        <div class="feature-item" @click="goToCreatedActivities">
          <div class="feature-icon">
            <van-icon name="add-o" size="28" />
          </div>
          <div class="feature-text">发布</div>
        </div>
        <div class="feature-item" @click="goToMessages">
          <div class="feature-icon">
            <van-icon name="chat-o" size="28" />
            <div class="badge" v-if="stats.unreadMessages">{{ stats.unreadMessages }}</div>
          </div>
          <div class="feature-text">消息</div>
        </div>
        <div class="feature-item" @click="goToSettings">
          <div class="feature-icon">
            <van-icon name="setting-o" size="28" />
          </div>
          <div class="feature-text">设置</div>
        </div>
        <div class="feature-item" @click="goToHistory">
          <div class="feature-icon">
            <van-icon name="clock-o" size="28" />
          </div>
          <div class="feature-text">历史</div>
        </div>
        <div class="feature-item" @click="goToNotifications">
          <div class="feature-icon">
            <van-icon name="volume-o" size="28" />
          </div>
          <div class="feature-text">通知</div>
        </div>
      </div>

      <!-- 内容区 -->
      <div class="content-section">
        <!-- 我的活动 -->
        <div class="section-header">
          <div class="section-title">
            <van-icon name="calendar-o" class="section-icon" />
            <span>我的活动</span>
          </div>
          <div class="section-more" @click="goToAllActivities">
            <span>全部</span>
            <van-icon name="arrow" />
          </div>
        </div>

        <div class="activity-list">
          <div class="activity-card" @click="goToParticipatedActivities">
            <div class="activity-left">
              <div class="activity-icon">
                <van-icon name="friends-o" size="24" />
              </div>
              <div class="activity-info">
                <div class="activity-title">我参与的活动</div>
                <div class="activity-desc">查看已报名参加的活动</div>
              </div>
            </div>
            <div class="activity-right">
              <div class="activity-count">{{ stats.participated || 0 }}</div>
              <van-icon name="arrow" />
            </div>
          </div>

          <div class="activity-card" @click="goToCreatedActivities">
            <div class="activity-left">
              <div class="activity-icon">
                <van-icon name="edit" size="24" />
              </div>
              <div class="activity-info">
                <div class="activity-title">我发布的活动</div>
                <div class="activity-desc">管理您创建的活动</div>
              </div>
            </div>
            <div class="activity-right">
              <div class="activity-count">{{ stats.created || 0 }}</div>
              <van-icon name="arrow" />
            </div>
          </div>
        </div>

        <!-- 其他服务部分已移除 -->
      </div>

      <!-- 退出登录按钮 -->
      <div class="logout-btn">
        <van-button block plain type="danger" @click="handleLogout">退出登录</van-button>
      </div>

      <!-- 版本信息 -->
      <div class="version-info">
        <span>版本 v1.0.0</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showDialog } from 'vant';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();

// 用户信息
const userInfo = computed(() => userStore.userInfo);
const isLoggedIn = computed(() => userStore.isLoggedIn);

// 统计数据
const stats = ref({
  favorites: 0,
  following: 0,
  followers: 0,
  likes: 0,
  participated: 0,
  created: 0,
  unreadMessages: 0,
  unreadNotifications: 0
});

// 加载状态
const loading = ref(true);

// 页面加载时获取数据
onMounted(async () => {
  try {
    // 如果已登录，获取用户统计数据
    if (isLoggedIn.value) {
      await fetchUserStats();
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    loading.value = false;
  }
});

// 获取用户统计数据
const fetchUserStats = async () => {
  try {
    // 这里可以调用API获取用户统计数据
    // 模拟数据
    stats.value = {
      favorites: 5,
      following: 10,
      followers: 15,
      likes: 20,
      participated: 3,
      created: 2,
      unreadMessages: 0,
      unreadNotifications: 2
    };
  } catch (error) {
    console.error('获取用户统计数据失败:', error);
  }
};

// 导航函数
const goToProfile = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/profile');
};

const goToFavorites = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/favorites');
};

const goToFollowing = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/following');
};

const goToFollowers = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/followers');
};

const goToLikes = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/likes');
};

const goToMessages = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/messages');
};

const goToHistory = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/history');
};

const goToCreatedActivities = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/created-activities');
};

const goToParticipatedActivities = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/participated-activities');
};

const goToAllActivities = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/all-activities');
};

const goToSettings = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/settings');
};

// 添加通知导航函数
const goToNotifications = () => {
  if (!isLoggedIn.value) {
    return router.push('/auth/login');
  }
  router.push('/user/notifications');
};

// 退出登录
const handleLogout = () => {
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    showCancelButton: true,
  }).then(() => {
    userStore.logout();
    showToast('已退出登录');
    router.push('/auth/login');
  }).catch(() => {
    // 取消退出
  });
};
</script>

<style lang="scss" scoped>
.my-page {
  background-color: #f7f8fa;
}

.content-container {
  padding: 16px;
}

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-profile {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.user-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
  border: 2px solid rgba($primary-color, 0.2);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.user-info {
  flex: 1;

  .user-name {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    display: flex;
    align-items: center;
  }

  .user-nickname {
    font-size: 12px;
    color: #666;
  }

  .user-id {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    .gender-icon {
      margin-left: 8px;
      display: flex;
      align-items: center;
    }
  }

  .debug-info {
    font-size: 10px;
    color: #999;
    background-color: #f5f5f5;
    padding: 4px;
    border-radius: 4px;
    max-height: 100px;
    overflow: auto;

    pre {
      margin: 0;
      white-space: pre-wrap;
    }
  }
}

.edit-profile-btn {
  color: #999;
}

.user-stats {
  display: flex;
  background-color: #fff;
  padding: 20px 0;
  margin-bottom: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  .stat-item {
    flex: 1;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;

    &:active {
      transform: scale(0.95);
    }

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 15%;
      height: 70%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba($primary-color, 0.1), transparent);
    }

    .stat-num {
      font-size: 24px;
      font-weight: 600;
      color: $primary-color;
      margin-bottom: 8px;
      text-shadow: 0 1px 2px rgba($primary-color, 0.1);
    }

    .stat-text {
      font-size: 13px;
      color: #666;
      font-weight: 500;
    }
  }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: #fff;
  padding: 24px 0 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    .feature-icon {
      position: relative;
      color: $primary-color;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba($primary-color, 0.08), rgba($primary-color, 0.15));
        border-radius: 50%;
        z-index: -1;
        transition: all 0.3s;
      }

      &:active {
        transform: scale(0.9);

        &::before {
          background-color: rgba($primary-color, 0.2);
        }
      }

      .badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: linear-gradient(to right, #ff2442, #ff4d6d);
        color: #fff;
        font-size: 12px;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        font-weight: 500;
        box-shadow: 0 2px 6px rgba(255, 36, 66, 0.3);
      }
    }

    .feature-text {
      font-size: 13px;
      color: #666;
      font-weight: 500;
    }
  }
}

.content-section {
  margin-bottom: 16px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);

    .section-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #333;

      .section-icon {
        margin-right: 10px;
        color: $primary-color;
        font-size: 20px;
        background-color: rgba($primary-color, 0.08);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
      }
    }

    .section-more {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #999;
      padding: 6px 12px;
      border-radius: 16px;
      background-color: rgba(0, 0, 0, 0.02);
      transition: all 0.3s ease;
      cursor: pointer;

      &:active {
        background-color: rgba($primary-color, 0.08);
        color: $primary-color;
      }

      .van-icon {
        margin-left: 4px;
        font-size: 12px;
      }
    }
  }

  .activity-list {
    background-color: #fff;

    .activity-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.03);
      transition: all 0.3s ease;
      cursor: pointer;

      &:active {
        background-color: rgba($primary-color, 0.05);
      }

      .activity-left {
        display: flex;
        align-items: center;

        .activity-icon {
          width: 52px;
          height: 52px;
          border-radius: 14px;
          background: linear-gradient(135deg, rgba($primary-color, 0.1), rgba($primary-color, 0.2));
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          color: $primary-color;
          box-shadow: 0 4px 12px rgba($primary-color, 0.15);
        }

        .activity-info {
          .activity-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
          }

          .activity-desc {
            font-size: 13px;
            color: #999;
          }
        }
      }

      .activity-right {
        display: flex;
        align-items: center;

        .activity-count {
          font-size: 18px;
          font-weight: 600;
          color: $primary-color;
          margin-right: 12px;
          background-color: rgba($primary-color, 0.08);
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 18px;
        }

        .van-icon {
          color: #ccc;
          font-size: 14px;
        }
      }
    }
  }

  .service-list {
    background-color: #fff;

    .service-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.03);
      transition: all 0.3s ease;
      cursor: pointer;

      &:active {
        background-color: rgba($primary-color, 0.05);
      }

      .service-left {
        display: flex;
        align-items: center;

        .service-icon {
          margin-right: 16px;
          color: $primary-color;
          font-size: 22px;
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba($primary-color, 0.08);
          border-radius: 12px;
        }

        .service-text {
          font-size: 16px;
          color: #333;
          font-weight: 500;
        }
      }

      .service-arrow {
        color: #ccc;
        font-size: 14px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.03);
        border-radius: 50%;
        transition: all 0.3s ease;

        &:active {
          background-color: rgba($primary-color, 0.1);
          color: $primary-color;
        }
      }
    }
  }
}

.logout-btn {
  padding: 20px 16px;

  .van-button {
    border-color: $primary-color;
    color: $primary-color;
    height: 48px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 24px;
    background-color: rgba($primary-color, 0.05);
    box-shadow: 0 4px 12px rgba($primary-color, 0.1);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(2px);
      box-shadow: 0 2px 6px rgba($primary-color, 0.1);
      background-color: rgba($primary-color, 0.1);
    }
  }
}

.version-info {
  text-align: center;
  padding: 16px;
  color: #999;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 编辑个人资料弹窗样式 */
.edit-profile-dialog {
  :deep(.van-dialog__content) {
    padding: 24px 0;
  }

  .avatar-upload {
    display: flex;
    justify-content: center;
    padding: 16px 0;

    .upload-area {
      position: relative;
      text-align: center;

      .van-image {
        border: 3px solid #f5f5f5;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        overflow: hidden;
      }

      .upload-text {
        margin-top: 10px;
        font-size: 13px;
        color: #999;
      }
    }
  }

  .form-actions {
    display: flex;
    padding: 20px 16px;
    gap: 16px;

    .van-button {
      flex: 1;
      height: 44px;
      border-radius: 22px;
      font-size: 15px;
      font-weight: 500;
    }
  }
}

.user-id {
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  .gender-icon {
    margin-left: 8px;
    display: flex;
    align-items: center;
    height: 16px;
  }
}

.notification-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba($primary-color, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;

  &:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid $primary-color;
  }

  &:after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: $primary-color;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
